$(function() {
    
    $('#page_title').change(function(){
        $('#page_title2').val($('#page_title').val());
    })
    
    
     $('#page_url').change(function(){
        $('#page_url2').val($('#page_url').val());
    })
    
    $('#next').click(function(){
        $('#navigation li:nth-child(2) a').click();
    })
    
    $('#preview').click(function(){
        $("#blockUI").css({ opacity: 0.6 });
        if ($('#blockUI') != undefined) {
          $('#blockUI').fadeIn(700);
        }
        preview();
    })
    
    $('#apply').click(function(){
        $("#blockUI").css({ opacity: 0.6 });
        if ($('#blockUI') != undefined) {
          $('#blockUI').fadeIn(700);
        }
        applay();
    })

    var $header     = $("#header_cont");
    var $left       = $("#left_cont");
    var $right      = $("#content_cont");
    var $content    = $("#right_cont");
    var $footer     = $("#footer_cont");
    var $dropBox;

	$( "div.dragableBox").draggable({ 
            appendTo: 'body',
            revert: 'invalid',
            containment: 'window',
            scroll: false,
            helper: 'clone',
            start: function(event, ui) {
				dropped = false;
                $id = $(this).attr('id');
                $dropBox = "<div id = '" + $(this).attr('id') + "' class='dropped'> " 
                + $(this).html() + 
                '<div id=\'delete_block\' onclick="deleteBlock(\''+ $(this).attr('id') +'\');"  ></div></div>';
			},
			stop: function(event, ui) {
				if (dropped==true) {
				} else {
				}
			}
            
		});


    
    $header.droppable({
			drop: function( event, ui ) {
			     dropped=true;
                 $cont = $(this).html();
                 $(this).html($cont + $dropBox);
			}
	});
    
    $left.droppable({
			drop: function( event, ui ) {
			     dropped=true;
                 $cont = $(this).html();
                 $(this).html($cont + $dropBox);
			}
	});
    
    $right.droppable({
			drop: function( event, ui ) {
			     dropped=true;
                 $cont = $(this).html();
                 $(this).html($cont + $dropBox);
			}
	});
    
    $content.droppable({
			drop: function( event, ui ) {
			     dropped=true;
                 $cont = $(this).html();
                 $(this).html($cont + $dropBox);
			}
	});
    
    $footer.droppable({
			drop: function( event, ui ) {
			     dropped=true;
                 $cont = $(this).html();
                 $(this).html($cont + $dropBox);
			}
	});

});


    
    
function deleteBlock($id) {
    $obj = $("#"+$id);
    var options = {};

    $obj.fadeOut('slow', function() {
        $obj.remove();
      });
   
}

function updateContainer(id, contaoner_id, vis){
    
    $('#' + id).toggle();
    if(!vis) {
        $container = $('#' + contaoner_id);
        $blocks =  $container.children();
         for(var i=0; i<$blocks.length; i++) {   
          $blockID = $blocks[i].id;
          $('#' + $blockID).remove();
        }
    }
}


function preview() {
    var $headBlocks    = $("#header_cont").children();
    var $leftBlocks    = $("#left_cont").children();
    var $rightBlocks   = $("#right_cont").children();
    var $contentBlocks = $("#content_cont").children();
    var $footBlocks    = $("#footer_cont").children();
    var $headIDs   = []; 
    var $leftIDs   = []; 
    var $rightIDs  = []; 
    var $contenIDs = []; 
    var $footIDs   = []; 
    
    
    for(var i=0; i<$headBlocks.length; i++) {   
      $headIDs.push($headBlocks[i].id);
    }
    
    for(var i=0; i<$leftBlocks.length; i++) { 
      $leftIDs.push($leftBlocks[i].id);
    }
    
    for(var i=0; i<$rightBlocks.length; i++) { 
      $rightIDs.push($rightBlocks[i].id);
    }
    
    
    for(var i=0; i<$contentBlocks.length; i++) { 
      $contenIDs.push($contentBlocks[i].id);
    }
    
    
    for(var i=0; i<$footBlocks.length; i++) { 
      $footIDs.push($footBlocks[i].id);
    }
    
    $pageStruct = {
                  header: $('input#header_check').is(':checked'), 
                  left: $('input#left_check').is(':checked'),
                  right: $('input#right_check').is(':checked'),
                  content: $('input#content_check').is(':checked'),
                  footer: $('input#footer_check').is(':checked'),
             }   
    
    var JSONOObject = [$headIDs, $leftIDs, $rightIDs, $contenIDs, $footIDs, $pageStruct];
    var JSONOString = JSON.stringify(JSONOObject);
    console.log(JSONOObject);
    AJAXRequest(
        'iJPages', 
        'createPreviewPage', 
        JSONOString, 
        
        function log(data) {
            console.log(data);
            showPreview();
            
        },
        
        function log(data) {
          if ($('#blockUI') != undefined) {
             $('#blockUI').fadeOut(700, function() {
               showMessageOpt('fail', 'Fail', 'something was wrong');      
             }); 
          } else {
            showMessageOpt('fail', 'Fail', 'something was wrong');      
          }     
        }
    );
         
}

function showPreview() {
  /*if ($('#blockUI') != undefined) {
              $('#blockUI').fadeOut(700);
            }*/
   $w = screen.width  * 0.8;
   $h = screen.height * 0.8;
   $previevLink = jQuery.trim($('#preview_link').html());
   previwWindow = window.open($previevLink,
    'block_edit', 'width=' + $w + ', height=' + $h + ', toolbar=0, location=0, directories=0, scrollbars=1, left=' + (screen.width-$w)/2 + ', top=' + (screen.height-$h)/2);
   if(!previwWindow) {
      
      if ($('blockUI') != undefined) {
         $('#blockUI').fadeOut(700, function() {
                                    showMessageOpt('warning', 'Pop-ups is disabled', 'enable pop-up fore quick preview');
                                    });
         
      } else {
        showMessageOpt('warning', 'Pop-ups is disabled', 'enable pop-up fore quick preview');
      }
      
      
   } else{
    
   
   previwWindow.focus();

   var wndSettingsTimer = setInterval(function(){
                                            if (previwWindow.closed){

                                              clearInterval(wndSettingsTimer);
                                              if ($('blockUI') != undefined) {
                                                 $('#blockUI').fadeOut(700);
                                              };
                                           
                                              } }, 10);
   }

}


function applay() {
  var $headBlocks    = $("#header_cont").children();
  var $leftBlocks    = $("#left_cont").children();
  var $rightBlocks   = $("#right_cont").children();
  var $contentBlocks = $("#content_cont").children();
  var $footBlocks    = $("#footer_cont").children();
  var $headIDs   = []; 
  var $leftIDs   = []; 
  var $rightIDs  = []; 
  var $contenIDs = []; 
  var $footIDs   = []; 
  
  
  for(var i=0; i<$headBlocks.length; i++) {   
    $headIDs.push($headBlocks[i].id);
  }
  
  for(var i=0; i<$leftBlocks.length; i++) { 
    $leftIDs.push($leftBlocks[i].id);
  }
  
  for(var i=0; i<$rightBlocks.length; i++) { 
    $rightIDs.push($rightBlocks[i].id);
  }
  
  
  for(var i=0; i<$contentBlocks.length; i++) { 
    $contenIDs.push($contentBlocks[i].id);
  }
  
  
  for(var i=0; i<$footBlocks.length; i++) { 
    $footIDs.push($footBlocks[i].id);
  }
  
 // var PageInfo = [];
  var PageInfo =  {};
  var inputs  = $(':input');
  for(var i=0; i<inputs.length; i++) { 
    
   PageInfo[inputs[i].name] = inputs[i].value;
  }
 

  $pageStruct = {
                  header: $('input#header_check').is(':checked'), 
                  left: $('input#left_check').is(':checked'),
                  right: $('input#right_check').is(':checked'),
                  content: $('input#content_check').is(':checked'),
                  footer: $('input#footer_check').is(':checked'),
             }   
  

  var JSONOObject = [PageInfo, $headIDs, $leftIDs, $rightIDs, $contenIDs, $footIDs, $pageStruct];
  var JSONOString = JSON.stringify(JSONOObject);
  
  AJAXRequest(
      'iJPages', 
      'createPage', 
      JSONOString, 
      
      function log(data) {
          if ($('#blockUI') != undefined) {
             $('#blockUI').fadeOut(700, function() {
               showMessage(data);
             }); 
          } else {
            showMessage(data);
          }     
      },
      
      function log(data) {
          showMessageOpt('fail', 'Fail', 'something was wrong');
      }
  );
  
}



